<template>
    <el-dialog v-model="visibility" title="预览图片" append-to-body width="80%" draggable :close-on-click-modal="false">
        <img w-full :src="imageUrl" alt="PreviewImage" />
        <template #footer>
            <div>
                <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiDeliveryTemplate from "@/api/modules/delivery-template"

const visibility = ref(false)
// 预览图片
const imageUrl = ref()

const props = defineProps(["rowData"])

watch(() => visibility.value, async (newVal) => {
    if (newVal) {
        if (props.rowData.id) {
            const res = await ApiDeliveryTemplate.previewDeliveryOrder(props.rowData.id)
            imageUrl.value = res
        }
    }
}, { immediate: true })

defineExpose({ visibility })
</script>